/*-----| PARAMS |---------------------------------------------------------------------------------------------------------------- WHITE rgba( 255,255,255,1 ) ffffff BLACK 000000 Light Grey 757780 DARK BLUE 011d42 Red d75152 Z-Stack Header: 1000 Main: 10 Footer: 1 -------| END PARAMS |--------------------------------------------------------------------------------------------------------------*/ /*====================================================================================================================================================== */ /*-----| Skelleton |------------------------------------------------------------------------------------------------------------- */ body { font-family: 'Open Sans', sans-serif; font-size: 16px; color: #000A15; line-height: 1.5; background: #F0F1F2; } .container { width: 100%; max-width: 1200px; margin: 0 auto; } .mobile { display: none; } /*-----| End Skelleton |------------------------------------------------------------------------------------------------------------- */ /*====================================================================================================================================================== */ /*-----| Header |------------------------------------------------------------------------------------------------------------- */ /*-----| End Header |------------------------------------------------------------------------------------------------------------- */ /*-----| Footer |------------------------------------------------------------------------------------------------------------- */ /*-----| End Footer |------------------------------------------------------------------------------------------------------------- */ /*====================================================================================================================================================== */ /*-----| MAIN |------------------------------------------------------------------------------------------------------------- */ h1 { font-size: 28px; font-weight: normal; color: #444444 ; padding-bottom: 16px; } h2 { font-size: 22px; font-weight: normal; color: #444444 ; padding-bottom: 16px; } article { font-size: 14px; line-height: 24px; } article h1, article h2 { font-size: 22px; line-height: 22px; font-weight: 400; padding-bottom: 10px; } article ol { padding-left: 16px; } article ol li { padding-left: 4px; } article ul { padding-left: 18px; } article ul li { padding-left: 2px; } a { color: #444444; text-decoration: none; } a:hover { color: #d75152; } footer { background: #444444 ; padding: 2px 0; line-height: 16pxpx; font-size: 12px; color: #eeeeee; text-align: center; } footer a { color: #ffffff; } /*-----| End MAIN |------------------------------------------------------------------------------------------------------------- */ /*====================================================================================================================================================== */ /*-----| LOGGER |------------------------------------------------------------------------------------------------------------- */ #logger_container { position: relative; z-index: 1; } #band nav { background: #ffffff; /*box-shadow: inset 0 -10px 50px rgba( 255,255,255,0.65 ), inset 0 10px 50px rgba( 0,0,0,0.1 ), 0 0 20px rgba( 0,0,0,0.92 );*/ } #band nav ul li { list-style: none; } #band nav ul li.logo img { height: 41px; } #band nav ul li#band_toggler { display: none; } #band nav ul li ul { position: relative; padding: 0 5px 5px 5px; } #band nav ul li ul li { padding: 10px 5px 0 5px; } #band nav ul li ul li.band_ { display: none; } #band nav ul.showAll li ul li.band_, #band nav ul.show li ul li.band_ { display: block; } #band nav ul li ul li.band_toggler { display: none; position: absolute; top: 0; right: 5px; } #band nav ul.showToggle li ul li.band_toggler { display: block; } #band nav ul li ul li.band_toggler div { position: relative; width: 32px; height: 41px; cursor: pointer; color: #aaaaaa; } #band nav ul li ul li.band_toggler div:hover { color: #4c4c4c; } #band nav ul li ul li.band_toggler div:before { display: block; content: "\f06e"; position: absolute; left: 0; top: 1px; right: 0; bottom: 0; line-height: 40px; text-align: center; font-family: "FontAwesome"; font-size: 18px; } #band nav ul.show li ul li.band_toggler div:before { content: "\f070"; } @media screen and (max-width: 1470px) { #band .switch span { display: none; } span.mobile { display: inline-block !important; } } @media screen and (max-width: 959px) { #band nav ul li ul { padding: 0 8px 5px 8px; } #band nav ul li ul li { padding: 10px 2px; } #band nav ul li ul li .switch { padding: 5px; font-size: 14px; } } #logger_lst { position: relative; height: 100%; max-height: 100vH; margin-bottom: -500px; padding-bottom: 500px; background: #ffffff; overflow: auto; } .safari #logger_lst, .chrome #logger_lst { margin-bottom: 0; padding-bottom: 0; } #logger_start { display: none; position: absolute; left: 50%; top: 60px; margin-left: -16px; padding: 0 0 0 2px; width: 32px; height: 32px; border-radius: 16px; text-align: center; line-height: 32px; background: #C4DEF2; box-shadow: inset 0 -10px 50px rgba( 255,255,255,0.65 ), inset 0 10px 50px rgba( 0,0,0,0.1 ), 0 0 20px rgba( 0,0,0,0.92 ); cursor: pointer; } #logger_start:hover { background: #757780; color: #ffffff; } #logger_lst > table > thead > tr > td { padding: 5px 10px 5px 10px; font-weight: bold; color: #ffffff; background: #757780; line-height: 34px; } #logger_lst > table > thead > tr.searchIsOn > td { background: #d75152; } #logger_lst > table > thead > tr > td:last-of-type > div.s { position: relative; float: right; max-width: 240px; padding: 0 40px 0 54px; color: #000000; } #logger_lst > table > thead > tr > td:last-of-type > div.s:after { display: block; content: "\f002"; position: absolute; left: 58px; top: 4px; width: 26px; height: 26px; font-family: "fontAwesome"; line-height: 26px; text-align: center; background: #F0F1F2; border-radius: 3px; color: #7c7c7c; font-size: 14px; } #logger_lst > table > thead > tr > td:last-of-type > div.s input { padding-left: 44px; } #logger_lst > table > thead > tr > td:last-of-type div.s div.sd { position: absolute; left: 0; top: 0; width: 48px; height: 34px; } #logger_lst > table > thead > tr > td:last-of-type div.s div.sd select { position: absolute; left: 0; top: 0; z-index: 3; width: 48px; height: 34px; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; font-family: "Lucida Console", Monaco, monospace; } #logger_lst > table > thead > tr > td:last-of-type div.s div.sd select::-ms-expand { display: none; } #logger_lst > table > thead > tr > td:last-of-type div.s div.sd label { position: absolute; left: 0; top: 0; z-index: 1; width: 48px; height: 34px; background: #F0F1F2; border-radius: 5px; line-height: 34px; text-align: center; color: #7c7c7c; font-size: 14px; } #logger_lst > table > thead > tr > td:last-of-type div.s div.sd select.sd_0 { background: none; } #logger_lst > table > thead > tr > td:last-of-type div.s div.sd { position: absolute; left: 0; top: 0; width: 48px; height: 34px; } #logger_lst > table > thead > tr > td:last-of-type div.s div.sc { display: none; position: absolute; right: 0; top: 0; width: 34px; height: 34px; line-height: 34px; text-align: center; color: #ffffff; cursor: pointer; } #logger_lst > table > thead > tr.searchIsOn > td:last-of-type div.s div.sc { display: block; } #logger_lst > table > thead > tr > td:last-of-type div.s div.sc:hover { color: #f00000; } #logger_lst > table > thead > tr > td:last-of-type > div.cq { position: relative; width: 100%; height: 0; } #logger_lst > table > thead > tr > td:last-of-type > div.cq { position: relative; width: 100%; height: 0; } #logger_lst > table > thead > tr > td:last-of-type > div.cq > div { position: absolute; left: 0; top: -5px; right: 260px; bottom: 0; height: 39px; padding: 0 10px 5px 10px; background: #4c4c4c; } #logger_lst > table > thead > tr > td:last-of-type > div.cq td { color: #000000; padding: 0 10px 0 0; font-weight: normal; } #logger_lst > table > thead > tr > td:last-of-type > div.cq td:nth-of-type(1) { color: #ffffff; font-weight: bold; } #logger_lst > table > thead > tr > td:last-of-type > div.cq td:nth-of-type(2) { padding: 0; } #logger_lst > table > thead > tr > td:last-of-type > div.cq td:nth-of-type(2) label { display: block; width: 100%; height: 34px; padding: 0 0 0 6px; line-height: 32px; font-size: 16px; background: #ffffff; border: 1px solid #eeeeee; border-right: none; border-radius: 5px 0 0 5px; } #logger_lst > table > thead > tr > td:last-of-type > div.cq td:nth-of-type(3) input { width: 68px; padding: 0 6px 0 0; border-left: none; border-radius: 0 5px 5px 0; outline: none; } #logger_lst > table > thead > tr > td:last-of-type > div.cq td:nth-of-type(4) { padding: 0 20px 0 10px; } #logger_lst > table > thead > tr > td:last-of-type > div.cq td:nth-of-type(5) { padding: 0 20px 0 0; } #logger_lst > table > thead > tr > td:last-of-type > div.cq td:nth-of-type(6) { padding: 0 5px 0 0; } #logger_lst > table > thead > tr > td:last-of-type > div.cq td:last-of-type { padding: 0; line-height: 1px; } #logger_lst > table > thead > tr > td:last-of-type > div.cq td:last-of-type button { width: 48px; } @media screen and (min-width: 769px) and (max-width: 1280px) { #logger_lst { padding-top: 44px; } #logger_lst > table > thead > tr > td:last-of-type > div.cq { position: absolute; left: 0; top: 0; right: 0; width: 100%; } #logger_lst > table > thead > tr > td:last-of-type > div.cq > div { position: absolute; left: 0; top: 0; right: 0; bottom: auto; height: 44px; padding: 0 45px 10px 10px; } } @media screen and (max-width: 768px) { #logger_lst { padding-top: 88px; } #logger_lst > table > thead > tr > td:last-of-type > div.cq { position: absolute; left: 0; top: 0; right: 0; width: 100%; } #logger_lst > table > thead > tr > td:last-of-type > div.cq > div { position: absolute; left: 0; top: 0; right: 0; bottom: auto; height: 88px; padding: 0 45px 0 10px; } #logger_lst > table > thead > tr > td:last-of-type > div.cq > div table, #logger_lst > table > thead > tr > td:last-of-type > div.cq > div thead { display: block; width: 100%; } #logger_lst > table > thead > tr > td:last-of-type > div.cq > div tr { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } #logger_lst > table > thead > tr > td:last-of-type > div.cq > div tr td { display: block; padding-bottom: 10px; } #logger_lst > table > thead > tr > td:last-of-type > div.cq > div tr td:nth-of-type(5) { flex-grow: 1; } #logger_lst > table > thead > tr > td:last-of-type > div.cq > div tr td:nth-of-type(6) { width: auto; min-width: 70%; flex-grow: 1; } } #logger_lst tbody tr:first-of-type td { border-top: 2px solid #757780; } #logger_lst tbody tr td { font-size: 15px; padding: 4px 10px; border-bottom: 1px solid #757780; line-height: 15px; } /*Zeilenhöhe Loggerliste*/ #logger_lst tbody tr:last-of-type td { border-bottom: 2px solid #757780; } #logger_lst tbody tr:nth-of-type(2N-1) td { background: #F0F1F2; } /*#logger_lst tbody tr.highlight td { background: linear-gradient(to bottom,#fffe95 00%,#fffd01 100%); } #logger_lst tbody tr.highlightR td { background: linear-gradient(to bottom,#f2ba6f 00%,#d75152 100%); } #logger_lst tbody tr.hide { display: none; }*/ #logger_lst tbody tr td:nth-of-type(1) { cursor: pointer; } #logger_lst tbody tr td:nth-of-type(1):hover { color: #757780; } #logger_lst tbody tr td:nth-of-type(1) > div { display: none; position: relative; z-index: 1000; } #logger_lst tbody tr td:nth-of-type(1):hover > div { display: block; } #logger_lst tbody tr td:nth-of-type(1) > div:before { display: block; content: ""; position: absolute; left: 100%; top: -15px; border-style: solid; border-width: 5px 10px 5px 0; border-color: transparent rgba( 0,0,0,0.85 ) transparent transparent; } #logger_lst tbody tr td:nth-of-type(1) > div > div { position: absolute; left: 100%; top: -32px; margin-left: 10px; padding: 10px 20px; line-height: 22px; background: rgba( 0,0,0,0.85 ); box-shadow: 5px 5px 20px rgba(0,0,0,0.3); color: #ffffff; white-space: nowrap; } #logger_lst tbody tr td:nth-of-type(2) { width: 100%; } #logger_lst tbody tr.msgtype_10 td { font-weight: bold; } #logger_lst tbody tr td:nth-last-of-type(2) { cursor: pointer; } #logger_lst tbody tr td:nth-last-of-type(2):hover { color: #757780; } #logger_lst tbody tr td:nth-last-of-type(2) > div { display: none; position: relative; z-index: 1000; } #logger_lst tbody tr td:nth-last-of-type(2) > div:before { display: block; content: ""; position: absolute; right: 100%; top: -15px; border-style: solid; border-width: 5px 0 5px 10px; border-color: transparent transparent transparent rgba( 0,0,0,0.85 ); } #logger_lst tbody tr td:nth-last-of-type(2):hover > div { display: block; } #logger_lst tbody tr td:nth-last-of-type(2) > div > div { display: flex; align-items: center; position: absolute; right: 100%; top: -162px; width: 310px; height: 300px; padding-right: 10px; } #logger_lst tbody tr:nth-of-type(1) td:nth-last-of-type(2) > div > div { top: -57px; align-items: flex-start; } #logger_lst tbody tr:nth-of-type(2) td:nth-last-of-type(2) > div > div { top: -92px; align-items: flex-start; } #logger_lst tbody tr:nth-of-type(3) td:nth-last-of-type(2) > div > div { top: -127px; align-items: flex-start; } #logger_lst tbody tr:nth-of-type(4) td:nth-last-of-type(2) > div > div { align-items: flex-start; } #logger_lst tbody tr:nth-of-type(5) td:nth-last-of-type(2) > div > div { align-items: flex-start; } #logger_lst tbody tr td:nth-last-of-type(2) > div > div > div { width: 300px; background: rgba( 0,0,0,0.85 ); box-shadow: 5px 5px 20px rgba(0,0,0,0.3); color: #ffffff; } #logger_lst tbody tr td:nth-last-of-type(2) > div > div > div > div:nth-of-type(1) { padding: 5px 20px; background: #757780; font-weight: bold; } #logger_lst tbody tr td:nth-last-of-type(2) > div > div > div > div:nth-of-type(2) { padding: 20px; min-height: 100px; } #logger_lst tbody tr td:nth-last-of-type(1) { cursor: pointer; padding-right: 25px; } #logger_lst tbody tr td:nth-last-of-type(1):hover { color: #757780; } #logger_lst .msg_mem_me td span { font-weight: bold; color: #f00000; } #logger_lst .msg_attachment { font-size:12px ;position: relative; z-index: 10; float: right; width: 24px; height: 16px; margin: 0 0 0 10px; line-height: 15px; } #logger_lst .msg_attachment > div { display: none; position: absolute; right: 34px; background-color: rgba( 0,0,0,0.85 ); box-shadow: 5px 5px 20px rgba(0,0,0,0.3); line-height: 22px; padding: 10px; color: #ffffff; font-weight: bold; } #logger_lst .msg_attachment:hover > div { display: block; } #logger_lst .msg_attachment > div:after { display: block; content: ""; position: absolute; right: -10px; border-style: solid; border-width: 5px 0 5px 10px; border-color: transparent transparent transparent rgba( 0,0,0,0.85 ); } #logger_lst .msg_attachment div.previewTxt{ top: -12px; white-space: nowrap; } #logger_lst .msg_attachment div.previewTxt:after{ top: 16px; } #logger_lst .msg_attachment div.previewImg{ top: -139px; width: 300px; height: 300px; } #logger_lst .msg_attachment div.previewImg:after { top: 145px; } #logger_lst .msg_attachment div.previewImgImage{ position: absolute; left: 10px; top: 42px; right: 10px; bottom: 10px; background-repeat: no-repeat; background-position: center; background-size: contain; } #logger_lst tr:nth-of-type(1) .msg_attachment div.previewImg { top: -34px; } #logger_lst tr:nth-of-type(1) .msg_attachment div.previewImg:after { top: 40px; } #logger_lst tr:nth-of-type(2) .msg_attachment div.previewImg { top: -69px; } #logger_lst tr:nth-of-type(2) .msg_attachment div.previewImg:after { top: 75px; } #logger_lst tr:nth-of-type(3) .msg_attachment div.previewImg { top: -104px; } #logger_lst tr:nth-of-type(3) .msg_attachment div.previewImg:after { top: 110px; } /*#logger_lst .msg_attachment div { display: none; position: absolute; left: -310px; top: -136px; width: 300px; height: 300px; border: 5px solid transparent; background-repeat: no-repeat; background-position: center; background-size: contain; background-color: rgba( 0,0,0,0.85 ); box-shadow: 5px 5px 20px rgba(0,0,0,0.3); border-radius: 10px; } #logger_lst tr:nth-of-type(1) .msg_attachment div { top: -41px; } #logger_lst tr:nth-of-type(2) .msg_attachment div { top: -76px; } #logger_lst tr:nth-of-type(3) .msg_attachment div { top: -101px; } #logger_lst .msg_attachment:hover div { display: block; } #logger_lst .msg_attachment div:before { display: block; content: ""; position: absolute; right: -10px; top: 50%; margin-top: -12px; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent rgba( 0,0,0,0.85 ); } #logger_lst tr:nth-of-type(1) .msg_attachment div:before { margin-top: -108px; } #logger_lst tr:nth-of-type(2) .msg_attachment div:before { margin-top: -73px; } #logger_lst tr:nth-of-type(3) .msg_attachment div:before { margin-top: -48px; }*/ #message { background: #4c4c4c; } #message .flex_container { padding: 12px 45px 12px 5px; } #message .flex_box { padding: 5px 0 5px 5px; } #message select { outline: none; } #message select.unselected { color: #666666; } #message select option { color: black; } #message select option[value="0"] { color: #666666; } #message .file_del_box { position: relative; } #message .file_del { display: none; position: absolute; right: -3px; top: -3px; width: 24px; height: 24px; border-radius: 12px; background: #f00000; } #message .file_del:hover { background: #d75152; } #message .file_del:after { display: block; content: "\f00d"; position: absolute; left: 0; top: 0; right: 0; bottom: 0; text-align: center; line-height: 24px; color: #ffffff; font-family: "FontAwesome"; } /*-----| END LOGGER |------------------------------------------------------------------------------------------------------------- */ /*====================================================================================================================================================== */ /*-----| SIDEBAR |------------------------------------------------------------------------------------------------------------- */ #sidebar > div { position: relative; z-index: 10; width: 0; height: 100vH; border-left: 1px solid rgba( 0,0,0,0.2 ); background: #ffffff; } body.sidebar #sidebar > div { width: 80px; box-shadow: 0 0 20px rgba( 0,0,0,0.2 ); } body.logger.sidebar #sidebar > div { width: 30vW; min-width: 230px; max-width: 400px; box-shadow: 0 0 20px rgba( 0,0,0,0.2 ); } #sidebar_toggler { display: none; position: absolute; right: 100%; top: 60px; z-index: 1; width: 40px; height: 70px; padding: 10px 0 0 10px; overflow: hidden; } body.logger #sidebar_toggler { display: block; } #sidebar_toggler div { position: relative; width: 30px; height: 50px; border-radius: 5px 0 0 5px; border-style: solid; border-color: rgba( 0,0,0,0.2 ); border-width: 1px 0 1px 1px; background: #ffffff; box-shadow: 0 0 20px rgba( 0,0,0,0.2 ); cursor: pointer; } #sidebar_toggler div:after { display: block; content: "\f053"; position: absolute; left: 0; top: 0; right: 0; bottom: 0; line-height: 50px; text-align: center; font-family: "FontAwesome"; } #sidebar_toggler div:hover:after { color: #d75152; } body.sidebar #sidebar_toggler div:after { content: "\f054"; } #sidebar nav { display: none; height: 100%; margin-left: -1px; padding: 10px 0; background: #ffffff; /*box-shadow: inset 0 -10px 50px rgba( 255,255,255,0.65 ), inset 0 10px 50px rgba( 0,0,0,0.1 );*/ } body.logger #sidebar nav { height: auto; padding: 0; } body.sidebar #sidebar nav { display: block; } #sidebar nav ul { padding: 0 5px 5px 5px; } #sidebar nav ul li { padding: 5px; list-style: none; flex-grow: 1; } body.logger #sidebar nav ul li { padding: 10px 5px; } #sidebar nav ul li a { padding: 5px; color: #2c2c2c; text-align: center; font-size: 20px; } #online { display: none; padding: 20px; position: absolute; left: 0; top: 66px; right: 0; bottom: 0; overflow-y: auto; } /*#online.info { overflow-y: visible; padding: 20px 40px 20px 20px; }*/ body.sidebar #online { display: block; } #online h2 { position: relative; padding-right: 110px; } #online h2:after { display: block; content: ""; position: absolute; right: 0; bottom: 12px; width: 100px; height: 55px; background: url("/pages/img/HB9Q_LOGO.png") no-repeat right bottom; background-size: 100% auto; } #who_lst table { width: 100%; border: solid #757780; border-width: 2px 0; } #who_lst table tr:nth-of-type(2N-1) { background: #F0F1F2; } #who_lst table tr td { padding: 0px 5px; } #who_lst table tr td:last-of-type { width: 100%; } #who_lst table tr td span { position: relative; display: inline-block; cursor: pointer; } #who_lst table tr td span span { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } #online.info #who_lst table tr td span span { display: none; } #who_lst table tr.whoMe td:last-of-type { font-weight: bold; color: #d75152; } #who_lst table tr.subtitle td { font-size: 12px; line-height: 24px; border-top: 2px solid #757780; } /*#who_lst table tr.who_day { border-top: 2px solid #757780; } #who_lst table tr.who_day ~ tr.who_day { border-top: none; }*/ #who_lst table tr.who_day td span, #who_lst table tr.who_day td .label { color: #646464; } #who_lst table tr td.CQisOld i { visibility: hidden; } #who_lst table tr td.CQis5 i { color: red; } #who_lst table tr td.CQis10 i { color: orange; } #who_lst table tr td.CQis15 i { color: #e8c062; } .writeTo { color: #757780; cursor: pointer; } .writeTo:hover { color: #000000; } #who_toggler { padding: 20px 0 0 0; } #who_toggler a { font-size: 12px; line-height: 20px; cursor: pointer; } @media screen and (max-width: 959px) { #who_toggler a:first-of-type { width: 100%; } } #who_lst div.tip_box { display: none; position: relative; z-index: 1000; } #who_lst div.tip_box { display: block; } #who_lst div.tip_box > div > div { min-width: 200px; } #who_lst div.tip_box > div > div { width: 100%; background: rgba( 0,0,0,0.85 ); box-shadow: 5px 5px 20px rgba(0,0,0,0.3); color: #ffffff; } #who_lst div.tip_box > div > div > div:nth-of-type(1) { padding: 5px 20px; background: #757780; font-weight: bold; } #who_lst div.tip_box > div > div > div:nth-of-type(2) { padding: 20px; min-height: 100px; } @media screen and (min-width: 768px) { #who_lst div.tip_box > div { display: flex; align-items: right; position: fixed; right: 30vW; top: 30vH; height: 440px; } } @media screen and (max-width: 767px) { #who_lst div.tip_box { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100vW; height: 100vH; } #who_lst div.tip_box > div { display: flex; align-items: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100vW; height: 100vH; padding: 15px; } } @media screen and (min-width: 1333px) { #who_lst div.tip_box > div { right: 400px; } } /*-----| END SIDEBAR |------------------------------------------------------------------------------------------------------------- */ /*====================================================================================================================================================== */ /*-----| NOLOGIN |------------------------------------------------------------------------------------------------------------- */ #nologin header { padding: 20px 60px; } #nologin header a { display: block; height: 80px; background: url("/pages/img/HB9Q_LOGO.png") no-repeat left center; background-size: contain; } #nologin .container { height: 100%; background: #ffffff; } #nologin .flex_container { padding: 30px; } #nologin .flex_box { padding: 30px; } #nologin .flex_box_form { background: #fafafa; border: 1px solid #f3f3f3; } /*-----| End NOLOGIN |------------------------------------------------------------------------------------------------------------- */ /*====================================================================================================================================================== */ .blockUI.blockMsg { background: none !important; border: none !important; } .weblink { color: #1155D2; } .weblink:hover { color: #d75152; }